VUE2.X组件之间通信的2种方式(针对子组件值变化去改变相应父组件的值)

1. 第一种方式针对 针对单一变量 ,直接上代码

注意:所有事件名称不能用原有的事件名或者已经存在的事件名,如使用input做为事件名,不会报错,但是效果不正确.

<div class="container" style="margin-top: 12px;">
        <div id="demo" class="row">
            {{ say }}
            <br />
            <my-input :value="say" v-on:changevalue="changeage"></my-input>
        </div>
    </div>


    <script>
        new Vue({
            el: '#demo',
            data: {
                say: "123"
            },
            components: {
                "my-input": {
                    props: ['value'],
                    data() {
                        return {
                            valuex: ''
                        }
                    },
                    /*  computed: {
                         xxxx() {
                             alert('computed');
                             return this.valuex + '111';
                         }

                     },
                     watch: {
                         value: function() {
                             this.valuex = this.value;
                             alert('watch');
                         }
                     }, */
                    template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}-{{xxxx}}</div>",
                    methods: {
                        change1(e) {
                            var v = e.target.value
                            this.$emit('changevalue', v)
                        }
                    }
                }
            },
            methods: {
                changeage: function(v) {
                    alert(v)
                    this.say = v
                }
            }
        })
    </script>

2. 第二种方式针对 针对对象变量(其它类型变量请自己测试,如数组类型)在子组件中直接用v-model即可 ,直接上代码

注意:子组件中直接用v-model绑定父组件过来的prop v-model:value="persion.name" .
父组件中 v-bind:persion="persion" 在官方网站中说可以这样写 v-bind="persion" .我试了,但是不可以.

 <div class="container" style="margin-top: 12px;">
        <div id="demo" class="row">
            <my-input v-bind:persion="persion"></my-input>
        </div>
    </div>

    <script type="text/x-template" id="m-input-template">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <input type="text" v-model:value="persion.name">
            <!-- <input type="text" v-model:value="say"> -->
        </div>
    </script>
    </div>

    <script>
        Vue.component('my-input', {
            props: {
                //say: String,
                persion: Object
            },
            template: '#m-input-template'
        })

        new Vue({
            el: '#demo',
            data() {
                return {
                    //say: "123",
                    persion: {
                        id: 0,
                        name: 'xiaoming',
                        age: 22,
                        isman: true
                    }
                }
            }
        })
    </script>